<template>
  <div class="app-container">
    <!-- 头部搜索框 -->
    <div class="filter-container">
      <section class="sectin01" style="width: '300px'">
        <!-- <el-tag type="primary" style="margin-right: 10px; font-size: 16px"
          >时间</el-tag
        > -->
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          @change="time02()"
        ></el-date-picker>
      </section>
      <section class="sectin01">
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >查询</el-button
        >
        <el-button
          v-waves
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="exportData"
          >导出</el-button>
      </section>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        :data="ipOrderPayDetail"
        max-height="700"
        border
        show-summary
        highlight-current-row
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          min-width="10"
        ></el-table-column>

        <el-table-column
          label="四方"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.sys_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="申请购买数量"
          min-width="55"
          prop="add_count"
          sortable
          class-name="end_times"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="金额"
          min-width="30"
          prop="total"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际购买数量"
          min-width="55"
          sortable
          prop="total_real"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.total_real ? row.total_real : '0' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          min-width="30"
          prop="total_gold"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.total_gold ? row.total_gold : '0'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
           <el-button size="mini" type="primary" @click="godetailedPage(row)">查看购买明细</el-button> 
          </template>
        </el-table-column>
        <el-table-column
          label="申请续费数量"
          min-width="50"
          sortable
          prop="renew_count"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.renew_count }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          min-width="30"
          prop="renew_amount"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.renew_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际续费数量"
          min-width="50"
          sortable
          prop="renew_real"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.renew_real }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          min-width="30"
          prop="renew_real_amount"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.renew_real_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <!-- <span>{{ row.total_gold ? row.total_gold : '0'}} 购买明细</span> -->
            <el-button size="mini" type="primary" @click="goRenewPage(row)">查看续费明细</el-button> 
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex";
import { IpStatisticsList_card } from "@/api/table";
import waves from "@/directive/waves";
import Pagination from "@/components/Pagination";
import {export2Excel} from "@/assets/script/exoprtExcel"


export default {
  name: "ComplexTable",
  components: { Pagination },
  directives: { waves },
  filters: {
    filterLongTime(status = "") {
      var str = status;
      str = str.replace(/\d{2}:\d{2}:\d{2}/g, "");
      return str;
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
    masDateFormat: function (msg = "", pattern = "") {
      var mt = new Date(msg);
      var y = mt.getFullYear();
      var m = (mt.getMonth() + 1).toString().padStart(2, "0");
      var d = mt.getDate();
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d;
      }
      return y + "-" + m + "-" + d;
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  computed: {
    ...mapState(["cardConfig"]),
  },
  data() {
    return {
      value7: [""],
      tableKey: 0,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        time: undefined,
        ip: undefined,
        status: undefined,
        sort: "+id",
      },
      ipOrderPayDetail: [],
    };
  },
  created() {
    //新
    this.IpStatisticsList_card(); //统计列表
  },
  methods: {
    //导出
    exportData() {
      var columns1=[
        {title:"四方",key:'sys_name'},
        {title:"单价",key:'price'},
        {title:"申请购买数量",key:'add_count'},
        {title:"金额",key:'total'},
        {title:"实际购买数量",key:'total_real'},
        {title:"金额",key:'total_gold'},
        {title:"申请续费数量",key:'renew_count'},
        {title:"金额",key:'renew_amount'},
        {title:"实际续费数量",key:'renew_real'},
        {title:"金额",key:'renew_real_amount'},
        ]
      export2Excel(columns1,this.ipOrderPayDetail,'财务统计')
    },
    // 跳转到购买明细
    godetailedPage(item){
      localStorage.setItem("id", item.pid);
      this.$router.push("../bankCardAsile/add_IP");
    },
    goRenewPage(item){
      localStorage.setItem("id", item.pid);
      this.$router.push("../bankCardAsile/renew");
    },
    //指定多少天后,获取时间
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear();
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      var value = yy + "-" + mm + "-" + dd;
      var value01 = yy + "-" + mm + "-" + dd;
      return [value, value01];
    },

    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
      // console.log(y + "-" + m + "-" + d)
      return y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00 ";
    },

    // 请求接口方法
    IpStatisticsList_card() {
      this.listLoading = true;
      this.value7 = [this.get_time()[0], this.get_time()[1]];
      IpStatisticsList_card({
        startdate: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        enddate: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
      }).then((res) => {
        this.ipOrderPayDetail = res.data.list;
        this.ipOrderPayDetail= this.ipOrderPayDetail.map((item,index)=>{
          for(var i in item){
            if(item[i]==null){
              item[i]=0
            }
          }
          return item
        })
        this.listLoading = false;
      });
    },
    //旧的方法
    time02() {
      // console.log(this.value7)
      if (this.value7) {
        this.$store.commit("serchTime_card", this.value7);
      } else {
        this.$store.commit("serchTime_card", ["", ""]);
      }
    },
    handleFilter() {
      // console.log(this.value7);
      this.listLoading = true;
      IpStatisticsList_card({
        startdate: this.value7[0] + " " + "00" + ":" + "00" + ":" + "00 ",
        enddate: this.value7[1] + " " + "23" + ":" + "59" + ":" + "59 ",
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.listLoading = false;
          this.ipOrderPayDetail = res.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    //行样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.el-table td {
  padding: 6px 0px;
}
.filter-container {
  margin-top: 5px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.addserve {
  /deep/.el-input {
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}

.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.outtime {
  color: #f56c6c;
}

/deep/.el-table .red_ip {
  color: #f56c6c !important;
}

.app-container {
  padding-left: 10px;
  padding-top: 10px;
  // .content {
  //   .right {
  //     box-sizing: border-box;

  //     .center {
  //       display: flex;
  //       justify-content: space-between;
  //       .left,
  //       .right {
  //         box-sizing: border-box;
  //         width: 49%;
  //         //   height: 600px;
  //         padding: 5px;
  //         /deep/.el-input__inner {
  //           line-height: 27px;
  //           height: 27px;
  //         }
  //       }
  //     }
  //   }
  // }
}

/deep/.el-dialog__body p {
  text-align: center;
}
</style>